<template>
  <div class="player">
    <div class="left">
      <img class="disc" src="../assets/img/disc.png" alt="" />
      <img class="cover" :src="musicInfo[0].al.picUrl" alt="" />
    </div>
    <div class="right">
      <div class="title">
        <img src="../assets/img/tag.png" alt="" /><span>{{
          musicInfo.name
        }}</span>
      </div>
      <div class="singer">
        歌手: <span>{{ musicInfo[0].ar | getArtists }}</span>
      </div>
      <div class="album">
        所属专辑: <span>{{ musicInfo[0].al.name }}</span>
      </div>
      <audio class="audio" autoplay controls :src="musicSrc"></audio>
      <ul class="lyric-container">
        <li
          class="lyric"
          v-for="(item, index) in lyrics"
          :key="'lyric' + index"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      // 音乐地址
      musicSrc: "",
      // 音乐的相关信息
      musicInfo: "",
      // 歌词列表
      lyrics: [],
    };
  },
  async created() {
    // 根据id获取音乐的地址
    const id = this.$route.params.id;
    const res = await axios(`https://autumnfish.cn/song/url?id=${id}`);
    this.musicSrc = res.data.data[0].url;
    // 根据地址获取音乐的相关信息
    const resp = await axios("https://autumnfish.cn/song/detail?ids=" + id);
    this.musicInfo = resp.data.songs;
    console.log(this.musicInfo);
    // 根据id获取歌词信息
    let lyric = await axios(`https://autumnfish.cn/lyric?id=${id}`);
    lyric  = lyric.data.lrc.lyric.split("\n");
    lyric = lyric.map(item=>{
      return item.replace(/\[.*?\]/,'')
    })
  this.lyrics = lyric
  },
};
</script>

<style>
@import url("../assets/css/player.css");
</style>